import { useState, useEffect } from 'react';
import Taro, { useReachBottom } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { AtFab, AtMessage } from 'taro-ui';
import { getActivityList } from "@/api/application/volunteer";
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "taro-ui/dist/style/components/fab.scss";
import Header from '@/components/header';
import Return from '@/components/Return';
import Card from '@/components/Card';
import css from './index.module.less';
import { noactivity } from "../image.js";

/**
 * 应用/志愿活动
 */
export default function Volunteer() {
  const [userInfo, setUserInfo] = useState({});
  //有无志愿活动的标志
  const [flag, setFlag] = useState(true);
  //志愿活动列表
  const [activityList, setActivityList] = useState([]);
  //当前页数
  const [current, setCurrent] = useState(1);
  //当前页内容数
  const [pageSize, setPageSize] = useState(6);

  useEffect(() => {
    getActivityList(1, 6).then(res => {
      Taro.getStorage({
        key: 'userInfo',
        success: function (a) {
          setUserInfo(a.data);
          if (a.data.isAudited !== 1) {
            Taro.atMessage({
              'message': '您还未进行认证',
              'type': 'error',
              'duration': 2000
            });
          }
          else {
            if (res.code === 200) {
              if (res.data === null) setFlag(false);
              else {
                setFlag(true);
                setActivityList(res.data);
              }
            }
          }
        }
      });
    });
  }, []);

  useReachBottom(() => {
    getActivityList(current + 1, pageSize).then(res => {
      if (res.data !== undefined) {
        setActivityList([...activityList, ...res.data]);
      }
    });
    setCurrent(current + 1);
  });

  const toActivityDetails = (id, activityState) => {
    Taro.navigateTo({ url: `activityDetail/index?id=${id}&activityState=${activityState}` });
  };

  const createAct = () => {
    Taro.navigateTo({ url: 'createActivity/index' });
  };

  return (
    <View className={css.home}>
      <Header message='志愿活动' left='140px' />
      <Return />

      <View className={css.content}>
        <AtMessage />
        {
          userInfo.isAudited !== 1 ? <View className={css.noAudited}><View>您还未进行认证</View></View> :
            flag ?
              <View>
                {
                  activityList.map((item) => {
                    const { id, activityTitle, activityTime, organizationName, picUrl, activityState } = item;
                    return (
                      <View key={id} onClick={() => toActivityDetails(id, activityState)}>
                        <Card info={{ text: activityTitle, date: activityTime, school: organizationName, image: picUrl, state: activityState }} />
                      </View>);
                  })
                }
              </View> :
              <View className={css.noActivity}>
                <Image className={css.noActivityImage} src={noactivity}></Image>
                <Text className={css.font}>暂未参加志愿活动</Text>
              </View>
        }
        {
          userInfo.isAudited !== 1 ? <></> :
            <View className={css.btn}>
              <AtFab className={css.fabButton} onClick={createAct}>+创建活动</AtFab>
            </View>
        }
      </View>
    </View>
  );
}